<template name="my">
	<view class="my">
		<scroll-view scroll-y>
			<view class="toppart">
				<view class="userinfos">
					<view class="userinfo-avatars" v-if="user">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view class="nouser" v-if="!user">
						<image src="/static/anxinsu/nouser.png" mode="" v-if="!user" class="nouserimage" />
					</view>
					<view class="user" v-if="user">
						<open-data type="userNickName"></open-data>
						<view class="phoneNumber">{{ user }}</view>
					</view>
					<view class="user" v-else>
						<view @click="gologin">登录</view>
					</view>
				</view>
				<view class="cu-card case mycardt">
					<view class="cu-item shadow">
						<view style="padding: 0 20px">
							<view class="bottom" @click="topage('/pages/myorder/myorder')">
								<view class="paopao">
									<img src="../../static/anxinsu/my-wddd.png" alt class="titleimg" />
									<text class="color">我的订单</text>
								</view>
								<text class="seeOrder">可查看所有订单</text>
								<img src="/static/img/youlan.png" alt class="youlan" />
							</view>
							<view class="bottom" @click="topage('/pages/InvoiceTitle/InvoiceList')">
								<view class="paopao">
									<img src="../../static/anxinsu/my-fpgl.png" alt class="titleimg" />
									<text class="color">发票管理</text>
								</view>
								<img src="/static/img/youlan.png" alt class="youlan" />
							</view>

							<view class="bottom" @click="topage('/pages/mail/mail')">
								<view class="paopao">
									<img src="/static/anxinsu/txl.png" alt class="titleimg" />
									<text>常用人信息</text>
								</view>
								<img src="/static/img/youlan.png" alt class="youlan" />
							</view>
						</view>
						<view style="padding: 0 20px">
							<view class="bottom" @click="unlock">
								<view class="paopao">
									<img src="../../static/anxinsu/lock.png" alt class="titleimg" />
									<text class="color">解绑手机号</text>
								</view>
								<img src="/static/img/youlan.png" alt class="youlan" />
							</view>
							<button class="shares" open-type="share">
								<view class="bottom">
									<view class="paopao">
										<img src="../../static/anxinsu/my-cxfx.png" alt class="titleimg" />

										<text class="color">程序分享</text>
									</view>
									<img src="/static/img/youlan.png" alt class="youlan" />
								</view>
							</button>
							<view class="bottom" @click="nopaizhao" style>
								<view class="paopao">
									<img src="../../static/anxinsu/my-bzzx.png" alt class="titleimg" />
									<text class="color">帮助中心</text>
								</view>
								<img src="/static/img/youlan.png" alt class="youlan" />
							</view>
							<!-- 	<view class="bottom" style="border-top: 8upx solid #f5f5f5">
								<view class="paopao" v-if="user">
									<img src="../../static/img/my-tcdl.png" alt class="titleimg" />
									<text class="color" @click="logout">退出登录</text>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="logo" @click="logout" v-if="user"><img src="../../static/anxinsu/logOut.png" alt /></view>
		<foo-bar @toIndex="toIndex" :home="1"></foo-bar>
	</view>
</template>

<script>
	import fooBar from '@/components/fooBar/fooBar.vue'
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";

	export default {
		components: {
			fooBar
		},
		name: "my",
		data() {
			return {
				index:''
			};
		},
		computed: {
			...mapState(["user"]),
		},
		methods: {
			async toIndex(index) {
				let that = this
				that.index = index
				if (index == 0) {
					uni.switchTab({
						url: '/pages/home/home'
					})
				} else if (index == 1) {
					uni.switchTab({
						url: '/pages/my/home'
					})
				} 
			},
			...mapMutations({
				setUser: "setUser",
			}),
			topage(v) {
				if (!uni.getStorageSync("phone")) {
					uni.navigateTo({
						url: "/components/login/login",
					});
					return;
				}
				uni.navigateTo({
					url: v,
				});
			},
			gologin() {
				uni.navigateTo({
					url: "/components/login/login",
				});
			},
			logout() {
				uni.showModal({
					title: "提示",
					content: "确定退出登录吗？",
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync("phone");
							uni.showToast({
								title: "退出成功",
								duration: 2000,
								mask: true,
							});
							this.setUser("");
							uni.switchTab({
								url: "/pages/home/home",
							});
						} else if (res.cancel) {}
					},
				});
			},

			nopaizhao() {
				uni.navigateTo({
					url: "/pages/detail/detail",
				});
			},
			unlock() {
				if (!uni.getStorageSync('phone')) {
					uni.navigateTo({
						url: "/components/login/login",
					});
					return
				}
				uni.showModal({
					title: "提示",
					content: "是否解绑手机号？",
					success: (res) => {
						if (res.confirm) {
							this.$http
								.post(
									"/app/updateOpenId", {
										phoneNumber: uni.getStorageSync('phone'),
										appFlag: 1
									}, {
										header: {} /* 会覆盖全局header */ ,
										dataType: "json",
										responseType: "text",
									}
								)
								.then((res) => {
									console.log(res);
									let data = res.data;
									if (data.code == 0) {
										console.log(data.data);
										uni.showToast({
											image: "/static/img/success.png",
											title: "解绑成功",
											duration: 1000,
										});
									} else {
										uni.showToast({
											image: "/static/img/warn.png",
											title: data.msg,
											duration: 1000,
										});
									}
								})
								.catch((err) => {});
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			}
		},
		onShow() {
			uni.showShareMenu({
				withShareTicket: true,
			});
			let user = uni.getStorageSync("phone");

			this.setUser(user);
			if (!user) {
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// });
			}
		},
		onShareAppMessage: function(res) {
			if (res.from === "button") {}
			return {
				title: "e秒安心住",
				imageUrl: "/static/img/fenxiang.png",
				path: "/pages/home/home",
				success: function(res) {
					console.log("成功", res);
				},
			};
		},
	};
</script>

<style>
	page {
		background: #fff;
	}

	.my {
		height: 100%;
		background: #fff;
		position: relative;
	}

	.toppart {
		/* height: 320rpx; */
		/* background-image: url(/static/img/youlan.png); */
		width: 100%;
		/* position: relative; */
	}

	.user {
		font-size: 18px;
		font-family: ArialMT;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 80upx;
	}

	.userinfos {
		width: 750upx;
		height: 420upx;
		color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* background: #4382ff; */
		background: url("../../static/img/bg.png") no-repeat center center;
		background-size: 100% 100%;
	}

	.userinfo-avatars {
		overflow: hidden;
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		margin-top: 80upx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
		margin-left: 10px;
	}

	.nouser {
		overflow: hidden;
		display: block;
		background-color: #fff;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		margin-top: 80upx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
		margin-left: 10px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.nouserimage {
		width: 106rpx;
		height: 94rpx;
	}

	.userinfo {
		font-size: 14px;
	}

	.my .phoneNumber {
		margin-top: 10px;
	}

	.my .title {
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		padding-top: 20px;
	}

	.mycardt {
		margin-top: 2upx;
	}

	.mycardt .top {
		display: flex;
		justify-content: space-between;
		height: 123rpx;
		align-items: center;
		padding: 0 20px;
	}

	.mycardt .bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		height: 120upx;
		font-size: 28upx;
		font-family: AlibabaPuHuiTiR;
		font-weight: 400;
		color: #000;
	}


	.rightjiantou {
		height: 10px;
		width: 10px;
	}

	.titleimg {
		height: 48upx;
		width: 48upx;
		margin-right: 36upx;
	}

	.mycontent {
		width: 100%;
		height: 151rpx;
		display: flex;
		padding: 10px;
	}

	.mycontentl {
		padding-left: 10px;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.mycontentr {
		padding-left: 20px;
		flex: 1;
		border-left: 2px solid #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.changyong {
		font-size: 16px;
		color: #767676;
		font-weight: bolder;
	}

	.changyongtitle {
		color: #787878;
		font-size: 13px;
	}

	.changyong img {
		height: 10px;
		width: 5px;
		margin-left: 10px;
	}

	.mycardt .top text {
		font-size: 36upx;
		color: #000;
	}

	.bottom .paopao {
		display: flex;
		align-items: center;
	}

	.seeOrder {
		position: absolute;
		right: 70rpx;
		font-size: 12px;
		font-weight: 200;
	}

	.tuichu {
		background: #4382ff !important;
		color: white !important;
	}

	.youlan {
		height: 24upx;
		width: 24upx;
	}

	.youhui {
		height: 10px;
		width: 5px;
		margin-left: 5px;
	}

	.shares {
		position: none;
		margin-left: 0;
		background-color: white;
		border: none;
		padding-left: 0px;
		line-height: inherit;
	}

	.shares::after {
		border: none;
	}

	.bangzhu {
		font-size: 18px;
		font-family: AlibabaPuHuiTiM;
		font-weight: 500;
		color: rgba(121, 121, 121, 1);
	}

	.mycardt .top text.more {
		font-size: 12px;
	}

	.tui {
		width: 100%;
		margin-top: 80upx;
	}

	.tui .button {
		width: 100%;
		font-size: 28rpx !important;
		letter-spacing: 4upx;
		height: 86upx !important;
		line-height: 86upx;
		margin: 0px;
		text-align: center;
		color: #797979 !important;
	}

	.logout {
		color: #767676 !important;
	}

	.gang {
		background: #767676;
		line-height: 1px;
		width: 15px;
		height: 1px;
	}

	/* 	.hubg {
		position: absolute;
		top: 0;
		height: 300rpx;
		z-index: -1;
		width: 100%;
	} */

	.shares {
		position: none;
		margin-left: 0;
		background-color: white;
		border: none;
		padding-left: 0px;
		line-height: inherit;
		font-size: 12px;
		color: black;
		padding-right: 0px;
	}

	.shares::after {
		border: none;
	}

	.my .cu-item {
		/* box-shadow: 1px 2px 3px 2px #efefef, -1px 1px 2px -1px #bfbfbf; */
		margin: 20upx 0 0 0upx;
	}

	.color {
		color: #000 !important;
	}

	.login-box {
		position: absolute;
		left: 0upx;
		bottom: 0upx;
		text-align: center;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-box image {
		width: 164upx;
		height: 38upx;
		margin-left: -20upx;
	}

	.blue {
		background: #4382ff !important;
		color: white;
		height: 88upx;
		border-radius: 44upx;
		width: 100%;
	}

	.logo {
		font-family: "Microsoft YaHei";
		font-weight: 400;
		color: #dfdcdc;
		position: fixed;
		text-align: center;
		bottom: 110rpx;
		width: 100%;
		left: 0;
	}

	.logo image {
		height: 30rpx;
		width: 350rpx;
	}
</style>